<template>
    <div>
        <div class="">
            <company-select v-model="companyId"  className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" @change="reGetData" :disabled="userStore.userInfo.roleId!=1"/>
        </div>
        <ul class="whlist">
            <li v-for="dt in lists" :key="dt.weatherFarmId" @click="setItem(dt)" :class="{'selected':selectId==dt.weatherFarmId}">
                <div class="ftips">
                    <span>{{dt.farmName}}</span>
                    <em>{{dt.landCount}}块、{{dt.areaSizeTotal}}亩</em>
                </div>
                <div class="tab">
                    <div class="item"><span>{{dt.tempMin}}~{{dt.tempMax}} °C</span><p>气温</p></div>
                    <div class="item"><span>{{dt.precip}}mm</span><p>降水</p></div>
                    <div class="item"><span>{{dt.windScale}}级</span><p>风力</p></div>
                    <div class="item"><span>{{dt.humidity}}%</span><p>湿度</p></div>
                </div>
            </li>
            <div v-if="lists && lists.length<1" style="text-align: center;padding:20px 0">暂无数据</div>
            <div class="more" v-if="lists && lists.length<total"><span @click="loadMore">点击加载更多</span></div>
        </ul>
    </div>
</template>
<script setup>
import {ref,onMounted} from "vue"
import companySelect from '@/components/custom/companySelect.vue'
import { useUserStore } from '@/pinia/modules/user'
import {getFarmWeather} from '@/api/plant'

const userStore = useUserStore()

const emit = defineEmits(['change'])

const companyId = ref('')
const limit = ref(20)
const page = ref(1)
const lists = ref('')
const total = ref(0)
const selectId = ref('')

onMounted(()=>{
    companyId.value = userStore.userInfo.companyId
    get_farm_weather()
})

const get_farm_weather = async()=>{
    const res = await getFarmWeather({
        limit:limit.value,
        page:page.value,
        companyId:companyId.value || null
    })
    total.value = res.total
    if(page.value== 1){
        lists.value = res.data
    }else{
        lists.value = [...lists.value,...res.data]
    }
    if(lists.value && lists.value.length>0){
        // 默认选择第一条
        selectId.value = lists.value[0].weatherFarmId
        emit('change',lists.value[0])
    }else{
        emit('change','')
    }
}
const setItem=(item)=>{
    selectId.value = item.weatherFarmId
    emit('change',item)
}

const loadMore = ()=>{
    page.value++
    get_farm_weather()
}

const reGetData = ()=>{
    page.value = 1
    get_farm_weather()
}
</script>
<style lang="scss" scoped>
.whlist{
    padding: 0;
    margin: 0;
    list-style: none;
    min-height:700px;
    max-height: calc(100vh - 140px);
    overflow: hidden;
    overflow-y: auto;
    li{
        padding: 10px;
        background-color: #f8f9f9;
        margin: 10px 0 0 0;
        &.selected{
            background-color: #a6d5f0;
        }
        .ftips{
            display: flex;
            height: 30px;
            line-height: 24px;
            border-bottom: 1px solid #e2e3e3;
            span{
                flex: 1;
            }
        }
        .tab{
            display: flex;
            margin: 10px 0 0 0;
            .item{
                flex: 1;
                line-height: 24px;
                text-align: center;
                &+.item{
                    &::before{
                        content: '';
                        display: block;
                        float: left;
                        height: 30px;
                        width: 1px;
                        background-color: #e2e3e3;
                        margin: 10px 0 0 0;
                    }
                }
            }
        }
    }
}
.more{
    text-align: center;
    padding: 10px 0;
    color: #999;
    span{
        &:hover{
            color: #333;
            cursor: pointer;
        }
    }
}
</style>